import React, { useEffect, useState } from 'react'
import { View,Image, Text, Input } from '@tarojs/components'
import Taro, { useDidShow } from '@tarojs/taro'

import './index.scss'

export default function WatchList() {
  const [watchList, setwatchList] = useState([])

  useDidShow(()=>{
    _getWatchList()
  })
  function handleDelete(e){  ///  点击删除
    Taro.showModal({
      title:'删除',
      content:'是否删除该观演人',
      success:res=>{
        if(res.confirm){
          Taro.$put(`/act/user-certification/${e.id}`).then(res=>{
            if(res.code == '1'){
              Taro.$toast('删除成功','success')
              setTimeout(()=>{
                _getWatchList()
              },1000)
            }else{
              Taro.$toast(res.message)
            }
          })
        }
      }
    })
  }

  ////       network
  async function _getWatchList(){
    Taro.showLoading({
      title:'加载中...'
    })
    const res = await Taro.$get('/act/user-certification','',1)
    if(res.code == '1'){
      setwatchList(res.content || [])
    }
  }
  return (
    <View className="watch-list">
      {watchList.length?
      <View className="list-main" v-if="">
        {watchList.map((item)=>{
          return <View className="list-item" key={item.id}>
            <View className="item-title">
              <View className='h2'>{item.realName}</View>
              <View className="p">身份证 {item.idCardNoDesc}</View>
            </View>
            <View className="item-button" onClick={()=>{handleDelete(item)}}>删除</View>
          </View>
        })}
      </View>:
      <View className="var-empty" v-else>
        <Image src={require('@/images/mine/empty.svg')} mode="widthFix" style="width: 160rpx; margin: 240rpx 0 32rpx;"></Image>
        <View className='p' style="color: #50687F;">暂无观演人信息</View>
      </View>}
      <View className="list-footer">
        <View className="footer-button" onClick={()=>{
          Taro.navigateTo({
            url:'/mainPages/watch-add/index'
          })
        }}>添加观演人</View>
      </View>
    </View>
  )
}
